<template>

  <view class="goods-detail">
     
    <!-- 1 轮播图 -->
    <u-swiper @click="handlePreviewImage" :list="goods.pics" name='pics_big' bg-color='#fff' height='498' img-mode='aspectFit'></u-swiper>
  <!-- 2 文字详情 -->
<view class="goods_price"> ${{goods.goods_price}}</view>
<view class="goods_name_row">
  <!-- 文字 -->
  <view class="goods_name" u-line-2>{{goods.goods_name}} </view>
  <!-- 收藏 -->
  <view class="goods_collect">
    <u-icon name="star"></u-icon>
    <view class="collect_text">收藏</view>
  </view>
</view>
  <!-- 3 图片详情 -->
  <view class="goods_info">
    <view class="goods_info_title">图片详情</view>
    <view class="goods_info_content">
      <!-- 方式一 -->
      <u-parse :html='goods.goods_introduce'></u-parse>
      <!-- 方式二 -->
      <!-- <rich-text :nodes="goods.goods_introduce"> </rich-text> -->
    </view>
  </view>

    <!-- 5 提交订单栏 -->

    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
        <view class="item">
          <u-icon
            name="home"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">店铺</view>
        </view>
        
        <navigator open-type="switchTab" class="item car" url="/pages/cart/cart">
          <u-badge
            class="car-num"
            :count="count"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>
          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view class="cart btn u-line-1" @click="handleCarAdd">加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
    </view>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
  data() {
    return {
      goods:null
    }
  },
   computed: {
    ...mapState({
      // 总数量
       count: (state) =>
        state.cart.cartList.reduce((count, item) => (count += item.nums), 0)
    }),
        },
  onLoad({goods_id}){
    goods_id=goods_id||47868
// 获取商品详情
  this.getdatail(goods_id)

  },
  methods:{
      // 获取vuex mutatations
    ...mapMutations(["cart/cartAdd"]),
    //异步发送请求 获取商品详情
   async getdatail(goods_id){  
         this.goods=await this.$u.get("/goods/detail",{goods_id})
    },
    //点击轮播图放大预览
    handlePreviewImage(index){
      //每一张片
    const urls=this.goods.pics.map((pic)=>pic.pics_big)
    // 点击那张图片就放大那张图片
    const current=urls[index]
    // 放大预览
    uni.previewImage({urls,current})
    },
     // 点击加入购物车
    handleCarAdd() {
      // console.log(this.cart/cartAdd);
      // console.log(this."cart/cartAdd");
      this["cart/cartAdd"]({ value: this.goods });
    },
  
  }

}
</script>

<style lang="scss">
.goods-detail {
  padding-bottom: 102rpx;
}
.goods_price{
  font-size: 32rpx;
  color: $themeColor;
  font-weight: 600;
  padding: 20px;
}
.goods_name_row{
  border-top: 5rpx solid #dedede;
  border-bottom: 5rpx solid #dedede;
  padding: 10rpx 0 ;
  display: flex;
  .goods_name{
flex: 5;
color: #000;
font-size: 30rpx;
padding: 0 10rpx;

// display: -webkit-box;
// overflow: hidden;
// -webkit-box-orient: vertical;
// -webkit-line-clamp: 2;
  }
  .goods_collect{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-left: 1px solid #dedede;
  }
}
.goods_info{
  .goods_info_title{
font-size: 32rpx;
  color: $themeColor;
  font-weight: 600;
  padding: 20px;
  }
  .goods_info_content{

  }
}
.navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  margin-top: 100rpx;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  padding: 16rpx 0;
  .left {
    display: flex;
    font-size: 20rpx;
    .item {
      margin: 0 30rpx;
      &.car {
        text-align: center;
        position: relative;
        .car-num {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }
  }
  .right {
    display: flex;
    font-size: 28rpx;
    align-items: center;
    .btn {
      line-height: 66rpx;
      padding: 0 30rpx;
      border-radius: 36rpx;
      color: #ffffff;
    }
    .cart {
      background-color: #ed3f14;
      margin-right: 30rpx;
    }
    .buy {
      background-color: #ff7900;
    }
  }
}
</style>